<template>
  <div class="flex flex-col justify-start cooperation">
    <h3 class="text-center text-xl font-medium mt-10">
      {{ $t("home.importantCooperation") }}
    </h3>
    <p class="text-center text-sm mt-2 text-[#000]">
      {{ $t("home.importantCooperationTip") }}
    </p>
    <ul class="flex flex-wrap justify-center mt-10">
      <li
        class="w-[200px] h-[80px] mr-2 mt-2 imgLi"
        v-for="item in 24"
        :key="item"
      >
        <img
          :src="getImgUrl(item)"
          alt=""
          class="w-full h-full object-contain"
        />
      </li>
    </ul>
  </div>
</template>
<script setup>
const getImgUrl = (code) => {
  return new URL(
    `../../../../assets/images/cooperation/${code}.png`,
    import.meta.url
  ).href;
};
</script>
<style lang="scss" scoped>
.cooperation {
  width: 80%;
  margin: 0 auto;
  .imgLi {
    background: #f2f7fe;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 90%;
      height: 20px;
    }
  }
}
</style>
